<template>
  <div>
    <div class="swipe-container">
      <mt-swipe :auto="4000">
        <mt-swipe-item>1</mt-swipe-item>
        <mt-swipe-item>2</mt-swipe-item>
        <mt-swipe-item>3</mt-swipe-item>
      </mt-swipe>
    </div>
    <div>
      <ul class="mui-table-view mui-grid-view mui-grid-9">
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
            <img src="../images/menu1.png" alt="新闻资讯">
            <div class="mui-media-body">新闻资讯</div>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
            <img src="../images/menu2.png" alt="图片详情">
            <div class="mui-media-body">图片详情</div>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
            <img src="../images/menu3.png" alt="商品购买">
            <div class="mui-media-body">商品购买</div>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
            <img src="../images/menu4.png" alt="留言反馈">
            <div class="mui-media-body">留言反馈</div>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
            <img src="../images/menu5.png" alt="视频专区">
            <div class="mui-media-body">视频专区</div>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
            <img src="../images/menu6.png" alt="联系我们">
            <div class="mui-media-body">联系我们</div>
          </a>
        </li>
      </ul>
    </div>
  </div>  
</template>

<script>
export default {
  data() {
    return {}
  },
  created() {
    
  },
  methods: {
    
  }
}
</script>

<style lang="less" scoped>
  .swipe-container {
    height:200px;
  }
  .mint-swipe-item {
    line-height: 200px;
    text-align: center;
    font-size: 30px;
    color: #fff;
  }
  .mint-swipe-item {
    &:nth-child(1) {
      background-color: blue;
    }
    &:nth-child(2) {
      background-color: yellow;
    }
    &:nth-child(2) {
      background-color: lightblue;
    }
  }
  .mui-grid-view.mui-grid-9 {
    background-color: #fff;
    border: none;
    img {
      width: 60px;
    }
    .mui-media-body {
      font-size: 12px;
    }
  }
  .mui-grid-view.mui-grid-9 .mui-table-view-cell {
    border: none;
  }
</style>